<template>
  <div class="date-type">
    <!-- 日期选择器 -->
    <div class="date-picker">
      <!-- 年份选择 -->
      <div v-if="type === 'year'" class="picker-with-arrows">
        <el-icon class="arrow-icon" @click="changeYear(-1)"><ArrowLeft /></el-icon>
        <el-date-picker
          v-model="date"
          type="year"
          placeholder="选择年"
          :disabled="loading"
          value-format="YYYY"
          @change="handleYearChange"
        />
        <el-icon class="arrow-icon" @click="changeYear(1)"><ArrowRight /></el-icon>
      </div>

      <!-- 月份选择 -->
      <div v-if="type === 'month'" class="picker-with-arrows">
        <el-icon class="arrow-icon" @click="changeMonth(-1)"><ArrowLeft /></el-icon>
        <el-date-picker
          v-model="date"
          type="month"
          placeholder="选择月"
          :disabled="loading"
          value-format="YYYY-MM"
          @change="handleMonthChange"
        />
        <el-icon class="arrow-icon" @click="changeMonth(1)"><ArrowRight /></el-icon>
      </div>

      <!-- 日期选择 -->
      <div v-if="type === 'day'" class="picker-with-arrows">
        <el-icon class="arrow-icon" @click="changeDay(-1)"><ArrowLeft /></el-icon>
        <el-date-picker
          v-model="date"
          type="date"
          placeholder="选择日期"
          :disabled="loading"
          value-format="YYYY-MM-DD"
          @change="handleDayChange"
        />
        <el-icon class="arrow-icon" @click="changeDay(1)"><ArrowRight /></el-icon>
      </div>
    </div>

    <!-- 数据列表 -->
    <el-table 
      :data="list"
      :loading="loading"
      style="width: 100%"
    >
      <el-table-column 
        label="时间" 
        prop="groupDate" 
        min-width="120"
      />
      <el-table-column 
        label="用电量" 
        prop="kwh" 
        min-width="100"
      >
        <template #default="{ row }">
          {{ row.kwh }}度
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue'
import { parseTime } from '@/utils/ruoyi'

const props = defineProps({
  type: {
    type: String,
    required: true
  },
  loading: {
    type: Boolean,
    default: false
  },
  list: {
    type: Array,
    default: () => []
  }
})

const emit = defineEmits(['date-change'])

const date = ref('')
const dateRange = ref([])

// 设置初始日期
onMounted(() => {
  // 如果初始类型是 day，设置为当天
  if (props.type === 'day') {
    date.value = new Date().toISOString().split('T')[0]
  }
})

// 监听类型变化设置默认日期
watch(() => props.type, (newType) => {
  const now = new Date()
  
  switch(newType) {
    case 'year':
      date.value = now.getFullYear().toString()
      handleYearChange(date.value)
      break
    case 'month':
      date.value = `${now.getFullYear()}-${(now.getMonth() + 1).toString().padStart(2, '0')}`
      handleMonthChange(date.value)
      break
    case 'day':
      date.value = now.toISOString().split('T')[0]
      handleDayChange(date.value)
      break
  }
})

/* 切换年份 */
function changeYear(offset) {
  if (!date.value) return
  const newYear = parseInt(date.value) + offset
  date.value = newYear.toString()
  handleYearChange(date.value)
}

/* 切换月份 */
function changeMonth(offset) {
  if (!date.value) return
  const [year, month] = date.value.split('-').map(Number)
  const newDate = new Date(year, month - 1 + offset)
  date.value = `${newDate.getFullYear()}-${(newDate.getMonth() + 1).toString().padStart(2, '0')}`
  handleMonthChange(date.value)
}

/* 切换日期 */
function changeDay(offset) {
  if (!date.value) return
  const currentDate = new Date(date.value)
  currentDate.setDate(currentDate.getDate() + offset)
  date.value = currentDate.toISOString().split('T')[0]
  handleDayChange(date.value)
}

/* 年份变化 */
function handleYearChange(val) {
  if (!val) return
  const startDate = `${val}-01-01`
  const endDate = `${val}-12-31`
  emit('date-change', { startDate, endDate })
}

/* 月份变化 */
function handleMonthChange(val) {
  if (!val) return
  const [year, month] = val.split('-')
  const lastDay = new Date(year, month, 0).getDate()
  const startDate = `${val}-01`
  const endDate = `${val}-${lastDay}`
  emit('date-change', { startDate, endDate })
}

/* 日期变化 */
function handleDayChange(val) {
  if (!val) return
  emit('date-change', { startDate: val, endDate: val })
}
</script>

<style lang="scss" scoped>
.date-type {
  padding: 20px;

  .date-picker {
    margin-bottom: 20px;
    
    .picker-with-arrows {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;

      :deep(.el-date-editor) {
        flex: 1;
      }

      .arrow-icon {
        font-size: 28px;
        color: var(--el-color-primary);
        cursor: pointer;
        padding: 8px;
        transition: all 0.3s;

        &:hover {
          transform: scale(1.1);
        }
      }
    }
  }
}
</style>